// // import React, { useState,useRef, useEffect} from 'react';
// // import { Card } from 'antd';
// // import A from './SegmentController.module.css'; // 假设这是你的样式文件
// import rou from '../image/竹笋炒腊肉.png'
// import baozi from '../image/baozi.png'
// import chaofan from '../image/chaofan.png'
// // import gsap from 'gsap'; 

// // const { Meta } = Card;

// // const images = [  
// //   rou,  
// //   rou, 
// //   rou, 
// //   baozi, 
// //   rou, 
// //   rou,
// //   chaofan, 
// //   rou, 
// //   rou, 
// // ]; 


// // const SegmentController = () => {  
// //   const [selectedSegment, setSelectedSegment] = useState('breakfast');  
// //   const containerRef = useRef(null);  
  
// //   // 渲染图片元素  
// //   const renderImages = (images) => {  
// //     return images.map((url, index) => (  
// //       <img key={index} src={url} alt="" className={A.imageItem} />  
// //     ));  
// //   };  
  
// //   // 根据选择的餐食返回对应的图片元素数组  
// //   const getImagesForSegment = (segment) => {  
// //     const startIndex = segment === 'breakfast' ? 0 : (segment === 'lunch' ? 3 : 6);  
// //     return renderImages(images.slice(startIndex, startIndex + 3));  
// //   };  
  
// //   // 处理按钮点击事件  
// //   const handleSegmentChange = (segment) => {  
// //     setSelectedSegment(segment);  
// //   };  
  
// //   // 初始化动画（如果需要的话，可以放在useEffect中）  
// //   useEffect(() => {  
// //     // 这里可以添加初始化动画代码，比如滚动到某个位置  
// //   }, [selectedSegment]); // 依赖项确保只在selectedSegment变化时运行  
  
// //   // 动画到特定餐食  
// //   const animateToSegment = (segmentIndex) => {  
// //     const container = containerRef.current;  
// //     if (!container) return;  
  
// //     // 计算滚动位置（这里假设每个图片组宽度相同）  
// //     const scrollPosition = segmentIndex * container.firstChild.offsetWidth;  
// //     gsap.to(container, { duration: 0.5, scrollLeft: scrollPosition, ease: 'power2.out' });  
// //   };  
  
// //   // 渲染组件  
// //   return (  
// //     <div>  
// //       <div>  
// //         {/* 餐食按钮 */}  
// //         <button onClick={() => handleSegmentChange('breakfast')}>早餐</button>  
// //         <button onClick={() => handleSegmentChange('lunch')}>午餐</button>  
// //         <button onClick={() => handleSegmentChange('dinner')}>晚餐</button>  
// //       </div>  
  
// //       {/* 水平滚动的容器 */}  
// //       <div  
// //         ref={containerRef}  
// //         className={A.container}  
// //         onScroll={(e) => { /* 如果需要处理滚动事件的话 */ }}  
// //       >  
// //         <div className={A.imageWrapper}>  
// //           {/* 渲染当前选中的餐食图片 */}  
// //           {getImagesForSegment(selectedSegment)}  
// //         </div>  
// //       </div>  
// //     </div>  
// //   );  
// // };  
  
// // export default SegmentController;
// // // const SegmentController = () => {
// // //   const [selectedSegment, setSelectedSegment] = useState('breakfast');

// // //   const handleSegmentChange = (segment) => {
// // //     setSelectedSegment(segment);
// // //     console.log(`Selected segment: ${segment}`);
// // //   };


// // //   const getImagesForSegment = (segment) => {  
// // //     if (segment === 'breakfast') return images.slice(0, 3);  
// // //     if (segment === 'lunch') return images.slice(3, 6);  
// // //     if (segment === 'dinner') return images.slice(6, 9);  
// // //     return []; // 默认情况，返回空数组  
// // //   };  

  
// // //   return (
// // //     <div>
// // //       <div style={{marginBottom:'1.5rem'}}>
// // //         <span style={{fontSize:'1.5rem',marginRight:'2rem'}}>今日三餐</span>
// // //         <button onClick={() => handleSegmentChange('breakfast')} style={{ marginRight: '1.5rem',fontSize:'1.2rem',borderRadius:'1rem'  }}>
// // //             早餐
// // //         </button>
// // //         <button onClick={() => handleSegmentChange('lunch')} style={{ marginRight: '1.5rem',fontSize:'1.2rem',borderRadius:'1rem' }}>
// // //             午餐
// // //         </button>
// // //         <button onClick={() => handleSegmentChange('dinner')} style={{fontSize:'1.2rem' ,borderRadius:'1rem'}}>
// // //             晚餐
// // //         </button>
// // //       </div>
// // //       <div className={A.tuijianContainer}> {/* 添加一个容器来管理图片的布局 */}  
// // //         {getImagesForSegment(selectedSegment).map((image, index) => (  
// // //           <div key={index} className={A.tuijianItem}>  
// // //             <Card hoverable cover={<img alt="" src={image} style={{ width: '15rem', height: '15rem' }} />}>  
// // //               <Meta title={<span style={{ fontSize: '1rem' }}>图片 {index + 1}</span>} />  
// // //             </Card>  
// // //           </div>  
// // //         ))}  
// // //       </div>  

// // //     </div>
// // //   );
// // // };

// // // export default SegmentController;

import rou from '../image/竹笋炒腊肉.png'
import baozi from '../image/baozi.png'
import chaofan from '../image/chaofan.png'
import React, { useState } from 'react';
import styled from 'styled-components';
import A from './SegmentController.module.css';
import { Card } from 'antd';

const { Meta } = Card;

const Container = styled.div`
  text-align: center;
  width: 700px;
  overflow: hidden;
`;

const MealImages = styled.div`
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  width: 620px; // 双倍宽度以容纳两组图片
`;

const Image = styled.img`
  width: 13rem;
  height: 16rem;
  flex-shrink: 0;
  border-radius: 12px;
`;

const ButtonContainer = styled.div`
  margin-top: 20px;
`;

const Button = styled.button`
  margin: 0 10px;
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
`;

const meals = [  
  [rou,  
  rou, 
  rou], 
  [baozi, 
  rou, 
  rou],
  [chaofan, 
  rou, 
  rou], 
]; 



function MealsComponent() {
  const [mealIndex, setMealIndex] = useState(0);
  const [translateX, setTranslateX] = useState(0);

  const getButtonStyle = (index) => (index === mealIndex ? { backgroundColor: '#FCDBDB' } : {}); 

  const handleClick = (newIndex) => {
    if (newIndex === mealIndex) return;

    // 直接计算新的滑动位置，每个餐的宽度是300px (每个图片100px * 3)
    const newTranslateX = -newIndex * 667; // 每组图片滑动的距离，左滑为负

    setTranslateX(newTranslateX);
    setMealIndex(newIndex);
  };

  return (
    <Container>
      <div style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '20px', marginLeft: '-35rem' }}>今日三餐</div>
      <MealImages style={{ transform: `translateX(${translateX}px)` }}>
        {meals.flat().map((meal, index) => (
          // <Image key={index} src={meal} alt={`Meal ${index + 1}`} />
          <div style={{marginLeft:'0.875rem'}} className={A.card}>
          <Card
            hoverable
            cover={<Image key={index} src={meal} alt={`Meal ${index + 1}`} style={{ width: '13rem', height: '16rem',borderRadius: '8px 8px 8px 8px'}} />}
          >
          </Card>
          </div>
          

        ))}
      </MealImages>
      <ButtonContainer>
        <Button style={getButtonStyle(0)} onClick={() => handleClick(0)}>早餐</Button>
        <Button style={getButtonStyle(1)} onClick={() => handleClick(1)}>午餐</Button>
        <Button style={getButtonStyle(2)} onClick={() => handleClick(2)}>晚餐</Button>
      </ButtonContainer>
    </Container>
  );
}

export default MealsComponent;




